<template>
	<main-container>
		<Detail ref="detailRef" />
		<!-- 搜索 -->
		<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
			<el-form-item label="手机号">
				<el-input v-model="queryParams.phone" clearable></el-input>
			</el-form-item>
			<el-form-item label="用户等级">
				<el-select v-model="queryParams.userGrade" clearable>
					<el-option label="普通用户" value="0"></el-option>
					<el-option label="会员用户" value="1"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="initPage">
					<el-icon> <ele-Search /> </el-icon>搜索</el-button
				>
				<el-button @click="resetQuery">
					<el-icon> <ele-Refresh /> </el-icon>重置</el-button
				>
			</el-form-item>
		</el-form>

		<!-- 工具栏 -->
		<div class="hx-table-toolbar">
			<div></div>
			<right-toolbar :searchBtn="true" :refreshBtn="true" @search="showSearch = !showSearch" @refresh="initPage"></right-toolbar>
		</div>
		<el-tabs v-model="activeName" type="card" @tab-click="tabHandle">
			<el-tab-pane label="全部" name="all"></el-tab-pane>
			<el-tab-pane label="微信小程序" name="WX-MA"></el-tab-pane>
			<el-tab-pane label="APP" name="APP"></el-tab-pane>
			<el-tab-pane label="普通H5" name="H5"></el-tab-pane>
		</el-tabs>
		<!-- 列表 -->
		<el-table v-loading="loading" :data="tableData" border>
			<el-table-column prop="avatarUrl" label="头像">
				<template #default="scope">
					<el-image
						style="width: 50px; height: 50px"
						:src="scope.row.avatarUrl"
						:preview-src-list="[scope.row.avatarUrl]"
						fit="cover"
						:preview-teleported="true"
					/>
				</template>
			</el-table-column>

			<el-table-column prop="nickName" label="昵称"></el-table-column>
			<el-table-column prop="phone" label="手机号" />
			<el-table-column prop="sex" label="性别">
				<template #default="scope">{{ scope.row.sex == '1' ? '男' : scope.row.sex == '2' ? '女' : '未知' }}</template>
			</el-table-column>
			<el-table-column prop="userGrade" label="用户等级">
				<template #default="scope">{{ scope.row.userGrade == '0' ? '普通用户' : scope.row.userGrade == '1' ? '会员用户' : '' }}</template>
			</el-table-column>
			<el-table-column prop="userSource" label="来源">
				<template #default="scope">{{
					scope.row.userSource == 'WX-MA' ? '微信小程序' : scope.row.userSource == 'APP' ? 'APP' : scope.row.userSource == 'H5' ? '普通H5' : '未知'
				}}</template>
			</el-table-column>
			<el-table-column prop="province" label="所在省份"></el-table-column>
			<el-table-column prop="city" label="所在城市"></el-table-column>
			<el-table-column prop="accountBalance" label="账户余额">
				<template #default="scope">
					<span style="color: red">￥{{ scope.row.accountBalance }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="parentUserInfo" label="邀请人" align="center">
				<template #default="scope">
					<div v-if="scope.row.parentUserInfo">
						<!-- <el-avatar :size="50" :src="scope.row.parentUserInfo.avatarUrl" /> -->
						<div>{{ scope.row.parentUserInfo.nickName }}</div>
						<el-button type="danger" circle @click="unbindParent(scope.row.id)">
							<el-icon style="margin-right: 0%"> <ele-Delete /> </el-icon
						></el-button>
					</div>
					<div v-else>
						<el-button type="primary" circle @click="bindParent(scope.row)">
							<el-icon style="margin-right: 0%"> <ele-Plus /> </el-icon
						></el-button>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间" />
			<el-table-column label="操作" width="200" align="center">
				<template #default="scope">
					<el-button link type="primary" v-auth="'mall:userinfo:get'" @click="doDetail(scope.row)">
						<el-icon> <ele-View /> </el-icon>详情</el-button
					>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<pagination
			v-model:total="page.total"
			v-model:currentPage="page.currentPage"
			v-model:pageSize="page.pageSize"
			@changePage="initPage"
		></pagination>
	</main-container>
</template>
<script lang="ts">
import { defineComponent, defineAsyncComponent, ref, reactive, toRefs } from 'vue';
import { getPage, bindObj, unbindObj } from '/@/api/mall/userinfo';
import { ElMessageBox, ElMessage } from 'element-plus';
export default defineComponent({
	components: { Detail: defineAsyncComponent(() => import('./detail.vue')) },
	setup() {
		const data = reactive({
			queryParams: { phone: '', userGrade: '' },
			page: {
				total: 0, // 总页数
				currentPage: 1, // 当前页数
				pageSize: 10, // 每页显示多少条
				ascs: [],
				descs: 'create_time',
			},
			tableData: [],
			activeName: 'all',
		});
		const showSearch = ref(true);
		const loading = ref(false);
		const detailRef = ref();

		const initPage = async () => {
			loading.value = true;
			let params = {
				current: data.page.currentPage,
				size: data.page.pageSize,
				ascs: data.page.ascs,
				descs: data.page.descs,
				userSource: data.activeName != 'all' ? data.activeName : '',
			};
			await getPage(Object.assign(params, data.queryParams))
				.then((response) => {
					data.tableData = response.data.data.records;
					data.page.total = response.data.data.total;
					loading.value = false;
				})
				.catch(() => {
					loading.value = false;
				});
		};
		/**
		 * 重置搜索表单
		 */
		const resetQuery = () => {
			data.queryParams = { phone: '', userGrade: '' };
		};
		/**
		 * 用户来源切换
		 */
		const tabHandle = (event: any) => {
			data.activeName = event.paneName;
			initPage();
		};
		/**
		 * 用户绑定上级
		 */
		const bindParent = (row: any) => {
			ElMessageBox.prompt('请输入手机号进行绑定', '绑定上级', {
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				inputPattern: /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/,
				inputErrorMessage: '请输入正确的手机号',
			}).then(({ value }) => {
				bindObj({ id: row.id, phone: value }).then((res: any) => {
					ElMessage.success('绑定成功');
					initPage();
				});
			});
		};
		/**
		 * 用户解绑上级
		 */
		const unbindParent = (id: string) => {
			ElMessageBox.confirm('此操作将解绑该上级用户，是否继续?', '提示', {
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
			}).then(() => {
				unbindObj(id).then((res) => {
					ElMessage.success('解绑成功');
					initPage();
				});
			});
		};
		const doDetail = (row: any) => {
			detailRef.value.initPage(row);
		};
		initPage();
		return {
			loading,
			detailRef,
			showSearch,
			doDetail,
			initPage,
			resetQuery,
			tabHandle,
			bindParent,
			unbindParent,
			...toRefs(data),
		};
	},
});
</script>
<style scoped></style>
